<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html, body {
            overflow: hidden;
            width   : 100%;
            height  : 100%;
            margin  : 0;
            padding : 0;
        }
    
        #renderCanvas {
            width   : 100%;
            height  : 100%;
            touch-action: none;
        }
    </style>
</head>
<body>
<canvas id="renderCanvas"></canvas>
<script src="/static/js/babylon.js"></script>
<script src="/static/js/babylon.inspector.bundle.js"></script>
<script src="/static/js/babylon.loader.min.js"></script>
<script src="/static/js/babylon-helper.js"></script>
<script>
    var canvas = document.getElementById('renderCanvas');
    var engine = new BABYLON.Engine(canvas, true),
        camera,
        scene,
        light;

    main();

    async function createScene() {
        scene = new BABYLON.Scene(engine);
        const camera = new BABYLON.ArcRotateCamera("camera", -Math.PI / 2, Math.PI / 2.5, 3, new BABYLON.Vector3(0, 0, 0));
        camera.attachControl(canvas, true);

        const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(-10, 10, 0));
        light.diffuse = new BABYLON.Color3(1, 1, 1);
        // light.specular = new BABYLON.Color3(1, 0, 0);
        // light.groundColor = new BABYLON.Color3(1, 1, 1);
        light.intensity = 1.0;


        const box = BABYLON.MeshBuilder.CreateBox("box", {});
        var mat = new BABYLON.StandardMaterial("myMaterial", scene);
        mat.emissiveColor = new BABYLON.Color3(0, 1, 0);
        box.material = mat;
        box.position.y = 0.51;

        const abstractPlane = BABYLON.Plane.FromPositionAndNormal(new BABYLON.Vector3(0, 0, 0), new BABYLON.Vector3(-1, -1, -1));

        const plane = BABYLON.MeshBuilder.CreatePlane("plane", {sideOrientation: BABYLON.Mesh.DOUBLESIDE});

        plane.rotation = new BABYLON.Vector3(Math.PI / 2, 0, 0);
        plane.scaling.scaleInPlace(10);
        var gl = new BABYLON.GlowLayer("glow", scene);
        gl.intensity = 1;

        // gl.referenceMeshToUseItsOwnMaterial(box);

        // scene.createDefaultCameraOrLight(true, true, true);

        // var gl = new BABYLON.GlowLayer("glow", scene);

        return scene;
    }

    async function main() {
        scene = await createScene();
        scene.debugLayer.show();

        BabylonHelper.showAxis(scene, 1);

        engine.runRenderLoop(function() {
            scene.render();
        });

        window.addEventListener("resize", function () {
            engine.resize();
        });
    }
        
   


</script>
</body>
</html>